'use client';

import { useState } from 'react';
import { Menu } from 'antd';
import type { MenuProps } from 'antd';
import { api } from '~/trpc/react';
import type { Task, Step } from '@prisma/client';

interface TaskSidebarProps {
  courseId: string;
  onSelect?: (id: string, type: 'task' | 'step') => void;
}

export function TaskSidebar({ courseId, onSelect }: TaskSidebarProps) {
  const [selectedKey, setSelectedKey] = useState<string>();
  
  const { data: tasks, isLoading } = api.courses.getTasks.useQuery({ courseId });

  const menuItems: MenuProps['items'] = tasks?.map((task: Task & { steps: Step[] }) => ({
    key: task.id,
    label: task.title,
    children: task.steps?.map((step: Step) => ({
      key: step.id,
      label: step.title,
    }))
  }));

  const handleSelect = ({ key }: { key: string }) => {
    setSelectedKey(key);
    const isStep = tasks?.some(task => 
      task.steps?.some(step => step.id === key)
    );
    onSelect?.(key, isStep ? 'step' : 'task');
  };

  return (
    <Menu
      mode="inline"
      selectedKeys={selectedKey ? [selectedKey] : []}
      items={menuItems}
      style={{ height: '100%' }}
      onSelect={handleSelect}
    />
  );
} 